<template>
  <div class="record">
    <div class="grid">
      <div class="header">订单列表</div>
      <div class="inner">
        <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="queryInfo.query" @change="fetch" placeholder="所有" style="width:130px">
              <el-option label="所有" value=""></el-option>
              <el-option label="已付款" value="2"></el-option>
              <el-option label="已受理" value="3"></el-option>
              <el-option label="处理完成" value="4"></el-option>
              <!-- <el-option label="已退单" value="8"></el-option> -->
              <el-option label="已退款" value="7"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 订单列表 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column type="expand" label="查看订单" width="60">
            <template slot-scope="scope">
              <div class="expand-cell">
                <div class="d-flex mb-2">
                  <div class="title mr-2">商品类别</div>
                  <div>{{ scope.row.category }}</div>
                </div>
                <div class="d-flex">
                  <div class="title mr-2">商品描述</div>
                  <div v-html="scope.row.description"></div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="order_no" label="订单号" min-width="120"></el-table-column>
          <el-table-column prop="id" label="商品ID" min-width="120"></el-table-column>
          <el-table-column prop="title" label="商品标题" min-width="150"></el-table-column>
          <el-table-column prop="orderDetail" label="订单详情" min-width="180"></el-table-column>
          <el-table-column prop="num" label="下单数量" width="80"></el-table-column>
          <el-table-column prop="pay_amount" label="总价" width="80"></el-table-column>
          <!-- <el-table-column prop="executionNum" label="执行数量" width="80"></el-table-column>
            <el-table-column prop="initialNum" label="初始数量" width="80"></el-table-column>
            <el-table-column prop="currentNum" label="当前数量" width="80"></el-table-column> -->
          <el-table-column prop="order_status_text" label="状态" min-width="80"></el-table-column>
          <el-table-column prop="remarks" label="备注" min-width="80"></el-table-column>
          <el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <Pagination :obj="obj" @pagination="fetch($event)" />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      orders: [],
      tableData: [{}],
      obj: {
        total: 0,
      },
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    // 获取订单列表
    async fetch(page) {
      if (page && page.newPage) this.queryInfo.pagenum = page.newPage;
      if (page && page.newSize) this.queryInfo.pagesize = page.newSize;

      // [{"name":"作品链接","value":"第一个输入框的值"},{"name":"备注信息","value":"第二个输入框的值"}]
      const formData = new FormData();
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      formData.append("order_status", this.queryInfo.query);
      const { data: res } = await this.$http.post("myOrders", formData);
      // console.log(res);
      if (res.code != "0") return this.$message("获取订单失败");
      res.data.forEach((item) => {
        item.orderDetail = "";
        JSON.parse(item.order_method).forEach((item1) => {
          item.orderDetail += item1.name + "：" + item1.value + "； ";
        });
        item.category1 ? (item.category = item.category1 + " / " + item.category2) : (item.category = item.category2);
      });
      const statusList = ["待付款", "已付款", "已受理", "处理完成", "取消", "退款", "商家取消订单, 退款完成"];
      res.data.forEach((item) => {
        item.order_status_text = statusList[item.order_status - 1];
      });

      this.tableData = res.data;
      this.obj.total = res.data.length;
    },
    handleChange(value) {
      // console.log(value, "订单状态");
    },
  },
};
</script>

<style lang="scss">
.record {
  padding-bottom: 200px;
  .grid {
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 30px;
    .header {
      padding: 15px;
      color: #fff;
      background-image: linear-gradient(to right, #ae7000, #fed18d);
    }
    .inner {
      padding: 20px;
    }
  }
}
.el-tabs__active-bar {
  width: 72px !important;
}
</style>
